🎨 Palette: [UX improvement] Add ARIA labels to icon-only buttons#23
🎨 Palette: [UX improvement] Add ARIA labels to icon-only buttons#23bobdivx wants to merge 1 commit into
Conversation
Added `aria-label`s to the "clear filter" button in `AppLogsPage.tsx` and the modal close button in `GithubImportModal.tsx` to improve accessibility for screen readers. Co-authored-by: bobdivx <6737167+bobdivx@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request improves accessibility by adding aria-label attributes to icon-only buttons in AppLogsPage.tsx and GithubImportModal.tsx, and documents this standard in .Jules/palette.md. Feedback suggests further improvements to these buttons, including adding explicit type="button" attributes to prevent accidental form submissions and adjusting text colors to ensure they meet WCAG contrast requirements for better visibility.
| {displayLines.length}/{lines.length} | ||
| </span> | ||
| <button onClick={() => setFilter('')} class="text-gray-600 hover:text-gray-300 text-xs">✕</button> | ||
| <button onClick={() => setFilter('')} class="text-gray-600 hover:text-gray-300 text-xs" aria-label="Effacer le filtre">✕</button> |
There was a problem hiding this comment.
The button is missing an explicit type="button", which is a best practice to prevent accidental form submissions. Additionally, the text-gray-600 color on the bg-gray-950 background has insufficient contrast (~2.8:1), which is below the WCAG 3:1 requirement for UI components. Using text-gray-400 (~10:1) would improve accessibility and maintain consistency with other utility buttons in this file.
| <button onClick={() => setFilter('')} class="text-gray-600 hover:text-gray-300 text-xs" aria-label="Effacer le filtre">✕</button> | |
| <button type="button" onClick={() => setFilter('')} class="text-gray-400 hover:text-gray-300 text-xs" aria-label="Effacer le filtre">✕</button> |
References
- Interactive elements should meet WCAG 2.1 AA contrast requirements (at least 3:1 for UI components) to ensure visibility for users with low vision.
| Importer un dépôt | ||
| </h2> | ||
| <button onClick={() => setOpen(false)} class="p-2 text-gray-400 hover:bg-gray-100 rounded-full transition-colors"> | ||
| <button onClick={() => setOpen(false)} class="p-2 text-gray-400 hover:bg-gray-100 rounded-full transition-colors" aria-label="Fermer"> |
There was a problem hiding this comment.
The button should have an explicit type="button". Furthermore, the text-gray-400 color on the light bg-gray-50 background has very low contrast (~2.0:1). Increasing it to text-gray-500 (~4.0:1) ensures it meets the WCAG 3:1 requirement for user interface components.
| <button onClick={() => setOpen(false)} class="p-2 text-gray-400 hover:bg-gray-100 rounded-full transition-colors" aria-label="Fermer"> | |
| <button type="button" onClick={() => setOpen(false)} class="p-2 text-gray-500 hover:bg-gray-100 rounded-full transition-colors" aria-label="Fermer"> |
References
- Interactive elements should meet WCAG 2.1 AA contrast requirements (at least 3:1 for UI components) to ensure visibility for users with low vision.
1 participant
💡 What: Added
aria-labelattributes to two icon-only utility buttons.🎯 Why: To improve the screen-reader experience, as these buttons visually rely on SVG icons ("✕" or cross path) without any textual content or context.
♿ Accessibility: Enhanced ARIA support on utility buttons conforming to accessibility standards.
PR created automatically by Jules for task 8947206614416460428 started by @bobdivx